import React, {PropTypes} from 'react';
import {Row, Col, Button, Table, Popconfirm, Pagination, Icon, Tooltip, message} from 'antd';
import styles from './OrderList.css';

function OrderList({
  total, pageNumber, pageSize, loading, list,
  onSelectChange, onPageChange, onShowSizeChange,
  onAdd, onEditItem, onDeleteItem, handleExport,
}) {

  const columns = [{
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 100,
  }, {
    title: '开单时间',
    dataIndex: 'billingTime',
    key: 'billingTime',
    width: 120,
  }, {
    title: '订单来源',
    dataIndex: 'orderFrom',
    key: 'orderFrom',
    width: 100,
    sorter: (a, b) => a.reserve_times - b.reserve_times,
  }, {
    title: '包间',
    dataIndex: 'room',
    key: 'room',
    width: 100,
  }, {
    title: '订单状态',
    dataIndex: 'orderStatus',
    key: 'orderStatus',
    width: 100,
  }, {
    title: '上钟状态',
    dataIndex: 'clockStatus',
    key: 'clockStatus',
    width: 100,
  }, {
    title: '订单信息',
    dataIndex: 'orderInfo',
    key: 'orderInfo',
  }, {
    title: '订单金额',
    dataIndex: 'orderAmount',
    key: 'orderAmount',
    width: 100,
  }, {
    title: '订单实收',
    dataIndex: 'paidAmount',
    key: 'paidAmount',
    width: 100,
  }, {
    title: '客人信息',
    dataIndex: 'customerInfo',
    key: 'customerInfo',
    width: 100,
  }, {
    title: '预约服务时间',
    dataIndex: 'serviceTime',
    key: 'serviceTime',
    width: 120,
  }, {
    title: '操作',
    dataIndex: 'ope',
    key: 'ope',
    width: 120,
    render: (text, record) => {
      let action;
      switch (record.clockStatus) {
        case 1:
          action = <div>
            <Row>
              <Col ><a onClick={() => onEditItem(record.orderId)}>查看</a></Col>
              <Col >
                <Popconfirm title="确定要取消该订单吗？"
                            onConfirm={() => onDeleteItem(record.orderId)}><a>取消</a>
                </Popconfirm></Col>
            </Row>
          </div>
          break;
        case 2:
          action = <div>
            <Row>
              <Col ><a onClick={() => onEditItem(record.orderId)}>查看</a></Col>
            </Row>
            <Row>
              <Col >
                <Popconfirm title="确定要取消该订单吗？"
                            onConfirm={() => onDeleteItem(record.orderId)}><a>打印</a>
                </Popconfirm></Col>
            </Row>
          </div>
          break;
        default:
          action = <div>
            <Row>
              <Col span={8}><a onClick={() => onEditItem(record.orderId)}>查看</a></Col>
              <Col span={8}><a onClick={() => onEditItem(record.orderId)}>打印</a></Col>
              <Col span={8}>
                <Popconfirm title="确定要取消该订单吗？"
                            onConfirm={() => onDeleteItem(record.orderId)}><a>取消</a>
                </Popconfirm></Col>
            </Row>
          </div>
          break;
      }
      return action;
    }
  }];

  const title = () => {
    return (
      <Row>
        <Col>
          <Button onClick={handleExport} type="primary" className='fr'>导出Excel</Button>
        </Col>
      </Row>
    )
  };

  return (
    <div >
      <Table
        title={title}
        scroll={{x: 1300}}
        columns={columns}
        dataSource={list}
        loading={loading}
        pagination={false}
        bordered
      />
      <Pagination
        className="ant-table-pagination"
        total={total}
        showTotal={total => `共 ${total} 条`}
        current={pageNumber}
        showSizeChanger
        showQuickJumper
        pageSize={pageSize}
        onChange={onPageChange}
        onShowSizeChange={onShowSizeChange}
      />
    </div>
  );
}

OrderList.propTypes = {
  total: PropTypes.any,
  pageNumber: PropTypes.any,
  loading: PropTypes.any,
  dataSource: PropTypes.array,
  onSelectChange: PropTypes.func,
  onPageChange: PropTypes.func,
  onAdd: PropTypes.func,
  onEditItem: PropTypes.func,
};

export default OrderList;
